<template>
  <div id="TodayRoom" style="display:flex;">

    <div class="Convenient">
      <Convenient></Convenient>
    </div>
    <div class="screen">
      <div class="date">
        <!-- <span>日期选择</span> -->
        <el-date-picker v-model="date" type="date" @change="getDate" value-format="yyyy-MM-dd" placeholder="选择日期">
        </el-date-picker>
      </div>

      <div class="roomScreen">
        <span>房型筛选</span>
        <el-select v-model="value" placeholder="全部房型  ">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value" placeholder="全部渠道  ">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value" placeholder="按房型排序  ">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="checkbox">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="display:inline-block;float:right;font-size: 14px;">
          <span style="color:red">23</span>
          <span>间</span>
        </div>
        <el-divider></el-divider>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <div>
            <el-checkbox style="margin-bottom:20px;margin-right: 10px;" v-for="city in cities" :label="city"
              :key="city">{{ city }}
              <div style="display:inline-block;float:right;font-size: 14px;margin-left: 10px;">
                <span style="color:red">23</span>
                <span>间</span>
              </div>
            </el-checkbox>
          </div>

        </el-checkbox-group>
      </div>
    </div>
    <div class="group">
      <div class="RoomGroup">
        <span>豪华大床房2</span>
        <span>(共5间)</span>
        <div class="roomTotal">
          <el-popover placement="right-start" width="286px" height="291px" trigger="hover">
            <div class="popover_content">
              <div class="top">
                <div class="client">
                  <span class="name">姓名：陈吉幸</span>
                  <span class="phone"> 132323232323</span>
                  <span class="status">已预定</span>
                </div>
                <div class="time">
                  时间
                  <span class="start">10-27入住</span>
                  <el-divider direction="vertical"></el-divider>
                  <span class="end">10-28离店</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>共1晚</span>
                </div>
                <span class="from">来源: <span style="color:#0486fe">自来客</span> </span>
              </div>
              <el-divider></el-divider>
              <div class="price">
                <div class="order_total">订单总额：￥2000</div>
                <div class="payed">已经收款：￥</div>
              </div>
              <div class="remark">
                备注：
                【信息项信息项信息项信息项信息项】
              </div>
              <el-divider style="margin:0px;"></el-divider>
              <div class="bottom_btn">
                <el-button type="text">转脏房</el-button>

              </div>
            </div>
            <!-- 欠,抵 -->
            <div class="orderRoom" @mouseenter="mouseover()" @mouseleave="mouseLeave()" @click="ShowOrder"
              slot="reference">
              <span class="RoomId">101</span>
              <span class="username">陈吉幸</span>
              <span class="channel">携程</span>
              <div class="bottom">
                <span class="price">￥ 2000</span>
                <span class="pledge">抵</span>
                <span class="debt">欠</span>
              </div>
            </div>
          </el-popover>

          <div class="room_close">
            <span class="RoomId">102</span>

            <div class="bottom">
              <span class="price">￥ 2000</span>
              <i class="el-icon-remove"></i>
            </div>
          </div>

          <div class="room_empty" @mouseenter="mouseover()" @mouseleave="mouseLeave()">
            <span class="RoomId">103</span>

            <div class="bottom">
              <span class="price">￥ 2000</span>

            </div>
          </div>
        </div>
      </div>
      <div class="RoomGroup" v-for="group in one_dayRoom" v-show="one_dayRoom" :key="group.id">
        <span>{{ group.pms_title }}</span>
        <div class="roomTotal" style="display:flex">
          <div :class="room.isSelect == false ? 'room_empty' : 'room_empty_true'" v-for="(room, index) in group.rooms"
            :key="room.id" @click="select(room, index)" style="position:relative" @mouseenter="mouseover()"
            @mouseleave="mouseLeave()">
            <div v-if="room.order_info.has_order == false">
              <el-popover placement="right" trigger="manual" popper-class="message-popover" v-model="room.visible"
                style="background:#4d4d4d;z-index:999">
                <div style="display:flex;flex-direction:column;background:#4d4d4d;text-align: center;">
                  <el-button class="btn" type="text" style="color:white;margin: 0px;"
                    @click="getOrder(room)">新增</el-button>
                  <el-button type="text" class="btn" style="color:white;margin: 0px;">入住</el-button>
                  <el-button type="text" class="btn" style="color:white;margin: 0px;">关房</el-button>
                  <el-button type="text" class="btn" style="color:white;margin: 0px;">转脏房</el-button>
                  <el-button type="text" class="btn" style="color:white;margin: 0px;">取消</el-button>
                </div>
                <div slot="reference">
                  <i class="el-icon-check" v-if="room.isSelect == true"
                    style="position:absolute;left:45%;top:45%;font-size:20px;color:#0486fe">
                  </i>
                  <span class="RoomId">{{ room.room_num }}</span>
                  <div class="bottom">
                    <span class="price">￥ {{ room.sale_price }}</span>
                  </div>
                </div>
              </el-popover>
            </div>
            <el-popover v-if="room.order_info.has_order == true" placement="right-start" width="286px" height="291px"
              trigger="hover">
              <div class="popover_content">
                <div class="top">
                  <div class="client">
                    <span class="name">姓名：{{ room.order_info.order_info.name }}</span>
                    <span class="phone"> {{ room.order_info.order_info.phone }}</span>
                    <span class="status">{{ room.order_info.order_info.status_text }}</span>
                  </div>
                  <div class="time">
                    时间
                    <span class="start">{{ room.order_info.order_info.start_date }}入住</span>
                    <el-divider direction="vertical"></el-divider>
                    <span class="end">{{ room.order_info.order_info.end_date }}离店</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>共{{ room.order_info.order_info.day }}晚</span>
                  </div>
                  <span class="from">来源: <span style="color:#0486fe">自来客</span> </span>
                </div>
                <el-divider></el-divider>
                <div class="price">
                  <div class="order_total">订单总额：￥{{ room.order_info.order_info.order_price }}</div>
                  <div class="payed">已经收款：￥{{ room.order_info.order_info.has_pay_price }}</div>
                </div>
                <div class="remark">
                  备注：
                  {{ room.order_info.order_info.remarks }}
                </div>
                <el-divider style="margin:0px;"></el-divider>
                <div class="bottom_btn">
                  <el-button type="text">转脏房</el-button>

                </div>
              </div>
              <div slot="reference" style="padding:0px;" @click="openOrderDrawer(room)"
                :class="[room.order_info.order_info.status == 6 ? 'orderRoom_6' : '', room.order_info.order_info.status == 7 ? 'orderRoom_7' : '', room.order_info.order_info.status == 8 ? 'orderRoom_8' : '']">
                <span class="RoomId">{{ room.room_num }}</span>
                <span class="username">{{ room.order_info.order_info.name }}</span>
                <!-- <span class="channel">携程?</span> -->
                <div class="bottom">
                  <span class="price">￥{{ room.order_info.order_info.order_price }}</span>
                  <span class="pledge">抵</span>
                  <span class="debt">欠</span>
                </div>
              </div>
            </el-popover>
          </div>
        </div>
      </div>
      <!-- 新建订单 -->
      <openOrderPoup ref="openOrderPoupRef" v-if="modelShow" :orderPoupDrawer="orderPoupDrawer" :roomType="gettitle"
        @closeOrderPoupDraw="closeOrderPoupDraw" :poupType="OrderPoupType" @GetRoom="GetRoom" :order="pick_on"
        :editOrder="order_details" :selectTime="selectTime" />
      <!-- 订单详情的 -->
      <order-drawer :drawer="drawer" :innerType="orderDrawer" :orderInfo="orderInfo"
        @closeDetailDrawer="closeDetailDrawer" @GetRoom="GetRoom" @editOrder="editOrder" :orderLog="order_log"
        :orderDetail="order_details" @ColseDrawer="ColseDrawer" @OpenRevocation="OpenRevocation"></order-drawer>
    </div>



  </div>
</template>

<script>

const RoomOptions = ['空脏', '住脏', '空房', '预离', '欠款', '空净', '入住', '预抵', '脏房', '多收'];
import openOrderPoup from '@/components/OrderPoup/order-poup.vue'
import { GetOne_dayRoom } from '@/api/hotel'
import { GetOrderDetail, pmsOrderLog } from '@/api/pms_order'
import OrderDrawer from '@/components/OrderDrawer/index.vue'
import Convenient from '../../../../components/convenient_switch/Convenient.vue'

export default {
  components: {
    openOrderPoup,//新建订单
    OrderDrawer,
    Convenient
  },
  computed: {
    gettitle() {
      const result = this.one_dayRoom.reduce((result, current) => {
        // console.log(this.one_dayRoom, "===== this.one_dayRoom======");
        if (Object.prototype.hasOwnProperty.call(result, current.title)) {
          current.rooms.forEach(room => {
            if (!result[current.title].includes(room.room_num)) {
              result[current.title].push(room.room_num);
            }
          });
        } else {
          result[current.title] = [];
          current.rooms.forEach(room => {
            result[current.title].push(room.room_num);
          });
        }
        return result;
      }, {});

      const options = Object.keys(result).map((key, index) => {
        return {
          label: key,
          value: 'title-' + index,
          children: result[key].map((key) => ({
            label: key,
            value: key,
          })),
        };
      });
      // console.log(result, "computed--gettitle");
      return options;
    }
  },
  data() {
    return {
      one_dayRoom: null,
      drawer: false,
      modelShow: false,
      selectTime: null,
      orderInfo: null,//有订单的弹窗储存
      pick_on: [],
      name: 'TodayRoom',
      AllRoomType: [],
      todayRoom: [
        {
          pms_title: '分组一',
          room: [
            {
              visible: false,
              isSelect: false,
              /*  第一个接口请求的数据  */
              "id": 11111, //该数据的ID
              "hotel_id": 1,//酒店ID  
              "room_id": 22, // 房型ID
              "title": "电竞大床房",//房型名称
              "room_num": "201",//房号id
              "room_total": "50", //该房型房间数量  该字段不是后台返回
              "room_theme": 1,
              "room_theme_name": '电竞房',
              "sales_price": 100, //平常销售价格
              "hotel_room_group_id": '1',
              "pms_title": "分组1",
              "is_need_clean": 1, // 0净房 1脏房
              /* -----  第一个接口请求的数据  -----*/
              /*-----   第二个接口请求的数据  -----*/

              hotel_room_price: [
                {
                  "id": 2,//日期价格ID
                  "room_id": 22,//房型ID
                  "date": "2022-12-9", // 1670556685  该房型的当天日期
                  "sales_price": "120",  //当天销售价格
                  "room_residue": "38",  //当天房型剩余数量
                  "status": 0, // 0禁用 1正常 2维修房 3保留房
                  "hotel_order": { // 子单
                    "id": 1,// 酒店订单子单ID
                    "order_no": "HD2013",//
                    "pms_order_id": 1, // 主单ID
                    "start_date": "2022-10-19", // 1670470290
                    "end_date": "2022-10-22", // 1670643090
                    "order_day_num": 3, // 天数
                    "status": 0, // 0待支付
                    "real_name": "下单人姓名",//
                    /*-----   第二个接口请求的数据  -----*/
                  }
                },
              ]

            },
            {
              isSelect: false,
              visible: false,
              /*  第一个接口请求的数据  */
              "id": 11111, //该数据的ID
              "hotel_id": 1,//酒店ID  
              "room_id": 22, // 房型ID
              "title": "电竞大床房",//房型名称
              "room_num": "202",//房号id
              "room_total": "50", //该房型房间数量  该字段不是后台返回
              "room_theme": 1,
              "room_theme_name": '电竞房',
              "sales_price": 100, //平常销售价格
              "hotel_room_group_id": '1',
              "pms_title": "分组1",
              "is_need_clean": 1, // 0净房 1脏房
              /* -----  第一个接口请求的数据  -----*/
              hotel_room_price: [
                {
                  "id": 2,//日期价格ID
                  "room_id": 22,//房型ID
                  "date": "2022-12-9", // 1670556685  该房型的当天日期
                  "sales_price": "120",  //当天销售价格
                  "room_residue": "38",  //当天房型剩余数量
                  "status": 0, // 0禁用 1正常 2维修房 3保留房
                  "hotel_order": { // 子单
                    "id": 1,// 酒店订单子单ID
                    "order_no": "HD2013",//
                    "pms_order_id": 1, // 主单ID
                    "start_date": "2022-10-19", // 1670470290
                    "end_date": "2022-10-22", // 1670643090
                    "order_day_num": 3, // 天数
                    "status": 0, // 0待支付
                    "real_name": "下单人姓名",//
                    /*-----   第二个接口请求的数据  -----*/
                  }
                },
              ]
            },
            {
              isSelect: false,
              visible: false,
              /*  第一个接口请求的数据  */
              "id": 11111, //该数据的ID
              "hotel_id": 1,//酒店ID  
              "room_id": 22, // 房型ID
              "title": "电竞大床房",//房型名称
              "room_num": "203",//房号id
              "room_total": "50", //该房型房间数量  该字段不是后台返回
              "room_theme": 1,
              "room_theme_name": '电竞房',
              "sales_price": 100, //平常销售价格
              "hotel_room_group_id": '1',
              "pms_title": "分组1",
              "is_need_clean": 1, // 0净房 1脏房
              /* -----  第一个接口请求的数据  -----*/
              hotel_room_price: [
                {
                  "id": 2,//日期价格ID
                  "room_id": 22,//房型ID
                  "date": "2022-12-9", // 1670556685  该房型的当天日期
                  "sales_price": "120",  //当天销售价格
                  "room_residue": "38",  //当天房型剩余数量
                  "status": 0, // 0禁用 1正常 2维修房 3保留房
                  "hotel_order": { // 子单
                    "id": 1,// 酒店订单子单ID
                    "order_no": "HD2013",//
                    "pms_order_id": 1, // 主单ID
                    "start_date": "2022-10-19", // 1670470290
                    "end_date": "2022-10-22", // 1670643090
                    "order_day_num": 3, // 天数
                    "status": 0, // 0待支付
                    "real_name": "下单人姓名",//
                    /*-----   第二个接口请求的数据  -----*/
                  }
                },
              ]
            },
          ]
        },
        {
          pms_title: '分组二',
          room: [
            {
              isSelect: false,
              visible: false,
              /*  第一个接口请求的数据  */
              "id": 11111, //该数据的ID
              "hotel_id": 1,//酒店ID  
              "room_id": 22, // 房型ID
              "title": "电竞大床房",//房型名称
              "room_num": "101",//房号id
              "room_total": "50", //该房型房间数量  该字段不是后台返回
              "room_theme": 1,
              "room_theme_name": '电竞房',
              "sales_price": 100, //平常销售价格
              "hotel_room_group_id": '1',
              "pms_title": "分组1",
              "is_need_clean": 1, // 0净房 1脏房
              /* -----  第一个接口请求的数据  -----*/
              /*-----   第二个接口请求的数据  -----*/

              hotel_room_price: [
                {
                  "id": 2,//日期价格ID
                  "room_id": 22,//房型ID
                  "date": "2022-12-9", // 1670556685  该房型的当天日期
                  "sales_price": "120",  //当天销售价格
                  "room_residue": "38",  //当天房型剩余数量
                  "status": 0, // 0禁用 1正常 2维修房 3保留房
                  "hotel_order": { // 子单
                    "id": 1,// 酒店订单子单ID
                    "order_no": "HD2013",//
                    "pms_order_id": 1, // 主单ID
                    "start_date": "2022-10-19", // 1670470290
                    "end_date": "2022-10-22", // 1670643090
                    "order_day_num": 3, // 天数
                    "status": 0, // 0待支付
                    "real_name": "下单人姓名",//
                    /*-----   第二个接口请求的数据  -----*/
                  }
                },
              ]

            },
            {
              isSelect: false,
              visible: false,
              /*  第一个接口请求的数据  */
              "id": 11111, //该数据的ID
              "hotel_id": 1,//酒店ID  
              "room_id": 22, // 房型ID
              "title": "电竞大床房",//房型名称
              "room_num": "102",//房号id
              "room_total": "50", //该房型房间数量  该字段不是后台返回
              "room_theme": 1,
              "room_theme_name": '电竞房',
              "sales_price": 100, //平常销售价格
              "hotel_room_group_id": '1',
              "pms_title": "分组1",
              "is_need_clean": 1, // 0净房 1脏房
              /* -----  第一个接口请求的数据  -----*/
              /*-----   第二个接口请求的数据  -----*/

              hotel_room_price: [
                {
                  "id": 2,//日期价格ID
                  "room_id": 22,//房型ID
                  "date": "2022-12-9", // 1670556685  该房型的当天日期
                  "sales_price": "120",  //当天销售价格
                  "room_residue": "38",  //当天房型剩余数量
                  "status": 0, // 0禁用 1正常 2维修房 3保留房
                  "hotel_order": { // 子单
                    "id": 1,// 酒店订单子单ID
                    "order_no": "HD2013",//
                    "pms_order_id": 1, // 主单ID
                    "start_date": "2022-10-19", // 1670470290
                    "end_date": "2022-10-22", // 1670643090
                    "order_day_num": 3, // 天数
                    "status": 0, // 0待支付
                    "real_name": "下单人姓名",//
                    /*-----   第二个接口请求的数据  -----*/
                  }
                },
              ]

            },
          ]
        }
      ],

      date: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      checkAll: false,
      checkedCities: ['预离', '住脏'],
      cities: RoomOptions,
      isIndeterminate: true,
      orderPoupDrawer: null,
      OrderPoupType: null,
      order_details: [],
      orderDrawer: '',
      order_log: null,
    }
  },
  beforeCreate() {


  },
  created() {
    this.getToday()
  },
  methods: {
    // 点击了修改订单
    editOrder() {
      console.log("父组件收到子组件的修改订单",);
      this.OrderPoupType = 'editOrder'
      this.modelShow = true
      this.orderPoupDrawer = true
      console.log(this.order_details);
      this.$nextTick(() => {
        this.$refs.openOrderPoupRef.orderPoupDrawer = true
      })
    },
    async openOrderDrawer(orderInfo) {
      console.log(orderInfo, "====orderInfo====");
      this.drawer = true
      this.orderDrawer = 'checkOut'
      this.orderInfo = orderInfo
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        order_id: orderInfo.order_info.order_info.order_id
      }

      await GetOrderDetail(data).then(res => {
        this.order_details = res.data.data
        this.one_dayRoom.forEach(roomType => {
          roomType.rooms.forEach(room => {
            room.isSelect = false;
            room.visible = false;
          })
        })
        this.pick_on = []
        sessionStorage.setItem('checkOutRoomId', this.order_details.order_id)
        console.log(this.order_details, "orderDetail");

      })
      ///* 操作日志 */
      await pmsOrderLog(data).then(res => {
        this.order_log = res.data.data
        console.log(this.order_log, "操作日志");
      })
      console.log("点击了有订单的", orderInfo);
    },
    // 新增订单后刷新
    GetRoom() {
      console.log("新增的订单");
      this.getDate()
    },
    closeDetailDrawer() {
      this.drawer = false
      console.log("接受到了退房的弹窗");
    },
    closeOrderPoupDraw() {
      console.log("父组件收到了关闭");
      this.orderPoupDrawer = false
      this.$nextTick(() => {
        this.$refs.openOrderPoupRef.orderPoupDrawer = false
      })

    },
    getOrder(room) {
      // console.log(this.pick_on);

      this.modelShow = true
      this.OrderPoupType = 'create'
      this.orderPoupDrawer = true
      this.$nextTick(() => {
        this.$refs.openOrderPoupRef.orderPoupDrawer = true
      })
    },
    // openOrderPoup (item, data) {
    //   // console.log('父组件', item, data)
    //   // console.log(this.pitch_on);
    //   this.modelShow = true
    //   this.orderPoupDrawer = true
    //   this.OrderPoupType = 'create'

    //   this.$nextTick(() => {
    //     this.$refs.openOrderPoupRef.orderPoupDrawer = true
    //   })
    // },
    async getToday() {
      // 获取当天的日期时间
      let time_today = new Date().getUTCFullYear() + '-' + (new Date().getUTCMonth() + 1) + '-' + new Date().getDate()
      this.selectTime = time_today
      this.date = time_today

      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        start_date: time_today
      }
      let one_dayRoom
      await GetOne_dayRoom(data).then(res => {
        one_dayRoom = res.data.data
        // console.log(this.one_dayRoom);

      })
      one_dayRoom.forEach(roomType => {
        roomType.rooms.forEach(room => {
          // console.log(room.order_info.status, "===room.order_info.status====");
          room.visible = false;
          room.isSelect = false;

        });
        // console.log(one_dayRoom);
      })
      this.one_dayRoom = one_dayRoom
      // 获取所有房型
      let AllRoomType = []
      this.one_dayRoom.forEach(item => {
        item.rooms.forEach(room => {
          if (!AllRoomType.includes(room.room_title)) {
            AllRoomType.push(room.room_title);
          }
        });
        this.AllRoomType = AllRoomType
        // console.log('获取所有房型', this.AllRoomType);
      });
    },
    async getDate(val) {
      console.log(val);
      this.selectTime = val
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        start_date: val
      }
      await GetOne_dayRoom(data).then(res => {
        this.one_dayRoom = res.data.data
      })
      this.one_dayRoom.forEach(roomType => {
        roomType.rooms.forEach(room => {
          console.log(room.order_info.status, "===room.order_info.status====");
          room.visible = false;

          room.isSelect = false;

        });
        console.log(this.one_dayRoom);
      })
    },
    ShowOrder() {
      this.drawer = true
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? RoomOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    mouseover() {
      let roomHover = document.querySelector('body')
      roomHover.style.cursor = ` pointer`
    },
    mouseLeave() {
      let roomHover = document.querySelector('body')
      roomHover.style.cursor = ` auto`
    },
    select(value, index) {
      // console.log(value, index);
      this.one_dayRoom.forEach(item => {
        item.rooms.forEach(room => {
          // console.log(room, "=========room");
          room.visible = false;

        })
      })
      // this.todayRoom.forEach(item => {
      //   item.room.forEach(item2 => {
      //     item2.visible = false
      //   })
      // })

      if (value.isSelect == false) {
        value.isSelect = true
        value.visible = true
        this.pick_on.push(value)
      } else if (value.isSelect == true) {

        //  for (let i = 0; i < this.pick_on.length; i++) {
        //   if( this.pick_on[i]==value){
        //     this.pick_on.splice
        //   }

        //  }
        let index = this.pick_on.findIndex(item => item === value);
        if (index !== -1) {
          this.pick_on.splice(index, 1);
        }
        console.log(value, "去除");
        console.log(this.pick_on);
        value.isSelect = false
        value.visible = false
      }
      // console.log(value.isSelect);
    },
    ColseDrawer(data) {
      console.log('父组件接受了', data)
      this.drawer = false
    },
    OpenRevocation(data) {
      this.drawer = false
      if (data == '撤销退房') {
        console.log('撤销退房')
        this.RevocationDrawer = true
      }
    },
  }
}
</script>

<style lang="scss" >
.Convenient {
  position: absolute;
  // bottom: 10%;
  z-index: 10000;
  // width: 100%;
  // display: flex;
  // justify-content: center;
  // align-items: center;
}

::v-deep .el-popover .el-popper {
  width: 256px !important;
  height: 291px !important;
}

.btn {
  &:hover {
    background: rgb(56, 56, 56) !important;
  }
}

.el-popper {
  margin-top: 0 !important;
}

.message-popover {
  background: #4d4d4d !important;

  .popper__arrow::after {
    border-right-color: #4d4d4d !important;
  }
}

#TodayRoom {
  .screen {
    display: inline-block;
    // margin-top: 50px;
    padding: 30px 20px;
    width: 250px;
    height: 796px;
    background: #ffffff;

    .date {
      margin-bottom: 40px;
    }

    .roomScreen {
      .el-select {
        margin-bottom: 12px;
      }
    }
  }

  .group {
    // width: 200vh;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 50px 30px;

    .roomTotal {
      margin-top: 20px;
      overflow: auto;

      .orderRoom_6 {
        padding: 10px;
        margin-right: 20px;
        float: left;
        width: 132px;
        height: 90px;
        background: #ffaa5c;
        box-shadow: 0px 4px 7px rgba(222, 222, 222, 0.5);
        border-radius: 4px;
        font-size: 12px;

        .RoomId {
          display: block;
          margin-bottom: 8px;
        }

        .channel {
          display: block;
          margin-bottom: 8px;
        }

        .username {
          display: block;
          margin-bottom: 8px;
        }

        .bottom {
          bottom: 10%;

          .debt {
            float: right;
            width: 16px;
            height: 16px;
            background-color: red;
            color: white;
            margin-right: 5px;
            text-align: center;
            border-radius: 3px;
            line-height: 17px;
          }

          .pledge {
            float: right;
            width: 16px;
            height: 16px;
            background-color: red;
            color: white;
            text-align: center;
            border-radius: 3px;
            line-height: 17px;
          }
        }
      }

      .orderRoom_7 {
        padding: 10px;
        margin-right: 20px;
        float: left;
        width: 132px;
        height: 90px;
        background: #32deff;
        box-shadow: 0px 4px 7px rgba(222, 222, 222, 0.5);
        border-radius: 4px;
        font-size: 12px;

        .RoomId {
          display: block;
          margin-bottom: 8px;
        }

        .channel {
          display: block;
          margin-bottom: 8px;
        }

        .username {
          display: block;
          margin-bottom: 8px;
        }

        .bottom {
          bottom: 10%;

          .debt {
            float: right;
            width: 16px;
            height: 16px;
            background-color: red;
            color: white;
            margin-right: 5px;
            text-align: center;
            border-radius: 3px;
            line-height: 17px;
          }

          .pledge {
            float: right;
            width: 16px;
            height: 16px;
            background-color: red;
            color: white;
            text-align: center;
            border-radius: 3px;
            line-height: 17px;
          }
        }
      }

      .orderRoom_8 {
        padding: 10px;
        margin-right: 20px;
        float: left;
        width: 132px;
        height: 90px;
        background: #d9d9d9;
        box-shadow: 0px 4px 7px rgba(222, 222, 222, 0.5);
        border-radius: 4px;
        font-size: 12px;

        .RoomId {
          display: block;
          margin-bottom: 8px;
        }

        .channel {
          display: block;
          margin-bottom: 8px;
        }

        .username {
          display: block;
          margin-bottom: 8px;
        }

        .bottom {
          bottom: 10%;

          .debt {
            float: right;
            width: 16px;
            height: 16px;
            background-color: red;
            color: white;
            margin-right: 5px;
            text-align: center;
            border-radius: 3px;
            line-height: 17px;
          }

          .pledge {
            float: right;
            width: 16px;
            height: 16px;
            background-color: red;
            color: white;
            text-align: center;
            border-radius: 3px;
            line-height: 17px;
          }
        }
      }

      .room_empty {
        &:hover {
          border: 1px solid var(--yf-border-color, #409eff);
          width: 131px;
          height: 88px;
        }

        padding: 10px;
        margin-right: 20px;
        float: left;
        width: 132px;
        height: 90px;
        background: white;
        box-shadow: 0px 4px 7px rgba(255, 226, 226, 0.5);
        border-radius: 4px;
        font-size: 12px;

        .RoomId {
          display: block;
          margin-bottom: 8px;
        }

        .bottom {
          // margin-top: 55px;
          display: flex;
          bottom: 10%;
          justify-content: space-between;

          i {
            line-height: 20px;
          }
        }
      }

      .room_empty_true {
        padding: 10px;
        margin-right: 20px;
        border: 1px solid var(--yf-border-color, #409eff);
        float: left;
        width: 131px;
        height: 89px;
        background: white;
        box-shadow: 0px 4px 7px rgba(255, 226, 226, 0.5);
        border-radius: 4px;
        font-size: 12px;

        .RoomId {
          display: block;
          margin-bottom: 8px;
        }

        .bottom {
          // margin-top: 55px;
          display: flex;
          bottom: 10%;
          justify-content: space-between;

          i {
            line-height: 20px;
          }
        }
      }

      .room_close {
        padding: 10px;
        margin-right: 20px;
        float: left;
        width: 132px;
        height: 90px;
        background: #cccccc;
        box-shadow: 0px 4px 7px rgba(222, 222, 222, 0.5);
        border-radius: 4px;
        font-size: 12px;

        .bottom {
          margin-top: 55px;
          display: flex;
          bottom: 10%;
          justify-content: space-between;

          i {
            line-height: 20px;
          }
        }
      }
    }
  }

  .popover_content {
    // overflow: hidden;
    font-size: 12px;

    .top {
      .client {
        display: flex;
        justify-content: space-around;

        .name {
          margin-right: 20px;
          line-height: 23px;
        }

        .phone {
          line-height: 23px;
        }

        .status {
          margin-left: 20px;
          text-align: center;
          color: #ffffff;
          width: 50px;
          height: 23px;
          border-radius: 3px;
          line-height: 23px;
          background-color: #ffaa5c;
        }
      }

      .time {
        margin-top: 20px;
        margin-bottom: 10px;
      }
    }

    .bottom_btn {
      display: flex;
      flex-direction: column;

      ::v-deep .el-button {
        padding: 0px !important;
      }
    }
  }
}

::v-deep .el-popover .el-popper .message-popover {
  background-color: #4d4d4d !important;
}
</style>